<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i>报考地区
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="margin-top20 margin-bottom20">
				<el-button type="primary" class="handle-del mr10" @click="handleEdit">新建
				</el-button>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header-style">
				<el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="name" label="省份"></el-table-column>
				<el-table-column prop="level.name" label="级别">
					<template slot-scope="scope">
						<span>省</span>
					</template>
				</el-table-column>
				<el-table-column prop="sort" label="排序"></el-table-column>
				<el-table-column label="操作" width="300" align="center">
					<template slot-scope="scope">
						<el-popconfirm title="确定设置？" @confirm="setSelect(scope.row)">
							<el-button slot="reference" type="text" icon="el-icon-edit" v-if="scope.row.recommend">取消优选</el-button>
							<el-button slot="reference" type="text" icon="el-icon-edit" v-else>设置优选</el-button>
						</el-popconfirm>
						<el-button v-if="scope.row.level.value==1" type="text" icon="el-icon-edit" class="margin-left10"
							@click="showChild(scope.$index, scope.row)">查看下级
						</el-button>
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
						</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total, prev, pager, next" :current-page="query.pageNumber"
					:page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 编辑弹出框 -->
		<el-dialog :title="title" :visible.sync="editVisible" width="40%">
			<el-form :rules="rules" ref="form" :model="form" label-width="100px">
				<el-form-item label="省份" prop="name">
					<el-input v-model="form.name" placeholder="区域名称"></el-input>
				</el-form-item>
				<el-form-item label="区域拼音" prop="pinyin">
					<el-input v-model="form.pinyin" placeholder="区域拼音"></el-input>
				</el-form-item>
				<el-form-item label="排序" prop="sort">
					<el-input v-model="form.sort" placeholder="排序"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit('form')">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 查看下级弹出框 -->
		<el-dialog title="查看下级" :visible.sync="levelVisible" width="50%" @close="type=0">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="handle-del mr10" @click="handleEdit">新建
				</el-button>
			</div>
			<el-table :data="tableData2" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
				<el-table-column prop="id" label="ID"></el-table-column>
				<el-table-column prop="name" label="省份"></el-table-column>
				<el-table-column prop="level.name" label="级别"></el-table-column>
				<el-table-column prop="sort" label="排序"></el-table-column>
				<el-table-column label="操作" width="200" align="center">
					<template slot-scope="scope">
						<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
						</el-button>
						<el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total, prev, pager, next" :current-page="query2.pageNumber"
					:page-size="query2.pageSize" :total="pageTotal2" @current-change="handlePageChange2">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="levelVisible = false" type="primary">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'basetable',
		data() {
			return {
				editVisible1: false,
				query: {
					name: '',
					parentId: 100000,
					parentName: null,
					alevel: 1,
					pageNumber: 1,
					pageNumberOld: 1,
					pageSize: 30
				},
				query2: {
					name: '',
					parentId: 100000,
					parentName: null,
					alevel: 1,
					pageNumber: 1,
					pageNumberOld: 1,
					pageSize: 30
				},
				pageTotal2: 0,
				tableData: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
				rules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					pinyin: [{
						required: true,
						message: '请输入区域拼音',
						trigger: 'blur'
					}]
				},
				title: '',
				levelVisible: false,
				type: 0,
				tableData2: []
			};
		},
		created() {
			this.getData();
		},
		methods: {
			//设置优选
			async setSelect(row) {
				if (row.level) {
					let query = {
						id: row.id,
						recommend: row.recommend ? false : true
					}
					const res = await this.$postForm('/admin/area/recommend', query)
					if (res.code == 1000) {
						this.$message.success('设置成功')
						this.getData()
					}
				}
			},
			//图片相关
			handleUploadSuccess(res, file) {
				this.form.keyPath = res.data;
			},
			showChild(index, row) {
				this.query2.parentId = row.id;
				this.query2.alevel = 2;
				this.query2.pageNumber = 1;
				this.query2.parentName = row.name;
				this.type = 1
				this.getData();
				this.levelVisible = true
			},
			async getData() {
				let query = this.query
				if (this.type) {
					query = this.query2
				}
				const res = await this.$get('/admin/area/pageQuery', query)
				if (res.code == 1000) {
					if (this.type) {
						this.tableData2 = res.data.list;
						this.pageTotal2 = res.data.totalRow;
					} else {
						this.tableData = res.data.list;
						this.pageTotal = res.data.totalRow;
					}
				}
			},
			handleAvatarSuccess(res, file) {
				this.form.image = res.message;
			},
			// 删除操作
			handleDelete(index, row) {
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$postForm('/admin/area/delete?id=' + row.id).then(res => {
						this.$message.success('删除成功');
						this.getData()
					})
				}).catch(() => {});
			},
			// 编辑操作
			handleEdit(row) {
				if (row.id) {
					this.form = JSON.parse(JSON.stringify(row));
					this.title = "编辑"
				} else {
					this.title = "新建"
					this.form = {}
				}
				this.editVisible = true;
			},
			// 保存编辑
			saveEdit(formName) {
				var vm = this;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.form.level = null;
						this.form.parentId = this.query.parentId;
						let alevel = this.query.alevel
						if (this.type) {
							alevel = this.query2.alevel
						}
						this.$post('/admin/area/add/' + alevel, this.form).then(res => {
							this.$message.success('提交成功');
							this.editVisible = false;
							this.getData();
						})
					} else {
						this.$message({
							message: '验证失败',
							type: 'error',
							duration: 1000
						});
						return false;
					}
				});
			},
			// 分页导航
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			},
			handlePageChange2(val) {
				this.query2.pageNumber = val
				this.getData();
			},
		}
	};
</script>

<style scoped>
</style>